<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>资产</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" href="css/property.css">
		<style type="text/css">

		</style>
		<!-- 图标 -->
		<script src="//at.alicdn.com/t/font_748398_ozk4d5k332j.js"></script>
		
		<script src="//at.alicdn.com/t/font_735135_auppsuv4uv.js"></script>
	</head>

	<body>
		<div class="header weui-flex">
			<!-- 20px占个位 -->
			<div id="btn-back" class="title-icon-box" style="width: 20px;"> 
				<!--<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-fanhui"></use>
				</svg>-->
			</div>
			<div class="my-flex"></div>
			<div class="title-box">
				<label>资产</label>
			</div>
			<div class="my-flex"></div>
			<div class="title-icon-box" onclick="submit()">
				<svg class="icon title-icon" aria-hidden="true">
					<use xlink:href="#icon-baobiao"></use>
				</svg>
			</div>
		</div>
		
		<div class="main">
			<div id="in" class="item-sum" value="画画,唱歌">
				<div class="left my-flex">
					资产
					<span class="logo"></span>
				</div>
				<div class="right">
					<div class="right-top">-99999999.90</div>
					<div class="right-bottom">近资产9999.00</div>
				</div>
			</div>
			
			<div class="item-box">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-zhifubaozhifu"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						支付宝
					</div>
					<div class="left-bottom">
						支付宝余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(82, 158, 222,0.8);border-left-color: rgba(82, 158, 222,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-yinlian"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						银行卡
					</div>
					<div class="left-bottom">
						银行卡余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(247, 150, 90,0.8);border-left-color: rgba(247, 150, 90,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-xianjin"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						现金
					</div>
					<div class="left-bottom">
						现金余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(239, 113, 107,0.8);border-left-color: rgba(239, 113, 107,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-weixinzhifu"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						微信
					</div>
					<div class="left-bottom">
						微信余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(49, 182, 239,0.8);border-left-color: rgba(49, 182, 239,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-xiaoshoudanju"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top" style="line-height: 40px;">
						理财中心
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(247, 150, 90,0.8);border-left-color: rgba(247, 150, 90,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-xianjin"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						现金
					</div>
					<div class="left-bottom">
						现金余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(247, 150, 90,0.8);border-left-color: rgba(247, 150, 90,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-xianjin"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						现金
					</div>
					<div class="left-bottom">
						现金余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			<div class="item-box" style="background: rgba(247, 150, 90,0.8);border-left-color: rgba(247, 150, 90,1);">
				<div class="icon-box">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-xianjin"></use>
					</svg>
				</div>
				<div class="left my-flex">
					<div class="left-top">
						现金
					</div>
					<div class="left-bottom">
						现金余额
					</div>
				</div>
				<div class="right">0.00</div>
			</div>
			
			<div class="item-add">
				<div class="icon-box">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jiahao"></use>
					</svg>
				</div>
				<div class="text-box">添加账户</div>
			</div>
			
		</div>
		
		<div class="bar-bottom weui-flex">
				<a class="my-flex" href="property.html">
					<label class="bar-box-item action">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-coupons_fill"></use>
							</svg>
						</div>
						<div class="bar-text">资产</div>
					</label>
				</a>
				<div class="my-flex">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-barrage"></use>
							</svg>
						</div>
						<div class="bar-text">报表</div>
					</label>
				</div>
				<a class="my-flex" href="index.html">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-addition"></use>
							</svg>
						</div>
						<div class="bar-text">账单</div>
					</label>
				</a>
				<div class="my-flex">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-flag"></use>
							</svg>
						</div>
						<div class="bar-text">计划</div>
					</label>
				</div>
				<div class="my-flex">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-manage"></use>
							</svg>
						</div>
						<div class="bar-text">更多</div>
					</label>
				</div>
		</div>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/jquery.swipe.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/city-picker.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/my-scroll.js"></script>
		<script>
			var touchObj = {};
			$('.main').on("touchstart", function(e) {
				var p = getTouchPosition(e);
				touchObj.start = p;
				touchObj.diffX = touchObj.diffY = 0;
			}).on("touchmove",function(e) {
				if(document.getElementsByClassName("main")[0].scrollTop <= 0){
					var p = getTouchPosition(e);
					touchObj.diffX = p.x - touchObj.start.x;
					touchObj.diffY = p.y - touchObj.start.y;
					if(Math.abs(touchObj.diffX) > Math.abs(touchObj.diffY)) return true; // 说明是左右方向的拖动
					if(touchObj.diffY  >　0){
						e.preventDefault();
						e.stopPropagation();
					}
				}
			});
			
			$("#in").select({
			  input: "画画,打球,唱歌,游泳",
			  title: "资产",
			  multi: true,
			  items: [
			    {
			      title: "画画",
			      value: 1
			    },
			    {
			      title: "打球",
			      value: 2
			    },
			    {
			      title: "唱歌",
			      value: 3
			    },
			    {
			      title: "游泳",
			      value: 4
			    },
			  ],
			   beforeClose: function(values, titles) {
		          if(values.indexOf("6") !== -1) {
		            $.toast("不能选睡觉", "cancel");
		            return false;
		          }
		          return true;
		        },
		        onChange: function(d) {
		          console.log(d.values,d.titles);
		        },
		        onClose: function (d) {
		          console.log('close')
		        }
			});
			
			$('.item-add').click(function(){
				alert('新建资产');
			});
		</script>
	</body>

</html>